<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: TizzyT
  Date: 2022/10/7
  Time: 17:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="./static/layui/css/layui.css" tppabs="http://layui/dist/css/layui.css" media="all">
    <script src="${pageContext.request.contextPath}/static/layui/layui.js" charset="utf-8"></script>
    <script  type="text/javascript"  src="${pageContext.request.contextPath}/static/js/lay-module/echarts/echarts.js"></script>

</head>
<body>
<div class="layui-inline">
    <label class="layui-form-label">部门名称：</label>
    <div class="layui-input-inline">
        <input type="text" name="depName" id="depName" autocomplete="off" class="layui-input">
    </div>
    <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="selectName">查询</button>
    <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-add-circle-fine" lay-event="add"
            id="addStuBtn">
        增加一条数据
    </button>
    <button type="button" class="layui-btn layui-btn-danger  layui-icon layui-icon-delete" lay-event="delete"
            id="deleteStuBtn">批量删除
    </button>
</div>



<!-- 表格行内toolbar -->
<div style="display: none;" id="barDemo">
    <a class="layui-btn layui-btn-xs  layui-icon layui-icon-edit"
       lay-event="edit">修改</a> <a
        class="layui-btn layui-btn-danger  layui-btn-xs layui-icon layui-icon-delete"
        lay-event="del">删除</a>
</div>

<table class="layui-hide" id="demo" lay-filter="demo"></table>


<table class="layui-hide" lay-filter="test" id="test"></table>


<!-- 弹出层div(新增和修改) -->
<div id="mydiv" style="display: none">
    <form class="layui-form" lay-filter="dataform" id="dataform" method="post">
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <input type="hidden" name="depId" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">部门名称：</label>
            <div class="layui-input-inline">
                <input type="text" name="depName" required lay-verify="required"
                       autocomplete="off" placeholder="部门名称" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit=""
                        lay-filter="dosubmit">立即提交
                </button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>
</div>


<!-- 柱状图 折线图  饼状图 -->
<div class="layui-card">
    <div class="layui-card-header">图表统计</div>
    <div class="layui-card-body">
        <div id="EchartZhu" style="width: 500px;height: 500px;"> </div>
    </div>
</div>

</body>


<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script type="text/javascript">
    layui.use(["element", "jquery", "layer", "form",  "table", "carousel", "laydate", "layedit", "upload"], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var element = layui.element;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var url;
        var tanIndex;
        carousel = layui.carousel;
        var laydate = layui.laydate;
        var layedit = layui.layedit;
        var upload = layui.upload;

        var mytable = table.render({
            elem: '#test'
            , url: 'getDepList'
            , toolbar: '#hhh'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {
                    type: 'checkbox',
                    fixed: 'left'  //启动复选框
                },
                {field: 'depId', title: '部门ID',sort: true}
                , {field: 'depName', title: '部门名称'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {field: 'deptCount', title: '员工人数'}
                , {
                    fixed: 'right',
                    title: '操作',
                    toolbar: '#barDemo',
                    width: 150,
                    align: 'center'
                }
            ]]
            // ,skin: 'line' //表格风格 只有行
            , even: true   //开启间隔行的背景颜色
            , page: true //是否显示分页
            , limits: [2, 4, 7, 10]
            , limit: 4//每页默认显示的数量

        });

       //echars柱状图
        var chartZhu = echarts.init(document.getElementById('EchartZhu'));
        //指定图表配置项和数据
        var optionchart = {
            title: {
                text: '各部门人数'
            },
            tooltip: {},
            legend: {
                data: ['数据量']
            },
            xAxis: {
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '人数',
                type: 'bar', //柱状
                data: [],
                itemStyle: {
                    normal: { //柱子颜色
                        color: 'red'
                    }
                },
            },]
        };
        $.ajax({
            url: '${pageContext.request.contextPath}/chartzhu',
            type: 'get',
            success: function(data) {
                console.log(data)
                $.each(data, function (index, obj) {
                    optionchart.xAxis.data.push(obj.depName);
                    optionchart.series[0].data.push(obj.deptCount);
                    console.log(obj)
                })
                chartZhu.setOption(optionchart, true); // 柱状图
            }
        });

        //查询
        $("#selectName").click(function () {
            mytable.reload({
                page: {
                    curr: 1 //重新从第 1 页开始
                    , limit: 5
                }
                , method: 'get'
                , url: 'getDepList'
                , where: {
                    depName: $("#depName").val() //参数 多个值,逗号隔开
                }
            });
        });

        //新增部门
        $("#addStuBtn").click(function () {
            tanIndex = layer.open({
                type: 1,  //设置类型 默认为0 1 页面层 2 iframe层
                title: '新增部门信息',  //标题
                content: $("#mydiv"), //内容  type=0 的内容
                skin: 'layui-layer-molv',//skin - 样式类名
                area: ['400px'],  //area - 宽高
                offset: [50, 400],//offset - 坐标 默认：垂直水平居中
                btnAlign: 'c',//按钮排列
                closeBtn: 2,  //设置关闭按钮的样式 默认是1  0是没有 2
                anim: 4,//设置动画
                maxmin: true,//该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
                success: function (index) {
                    url = "addDep";
                    //清空表单数据
                    $("#dataform")[0].reset();
                }
            });
        });


        //新增form表单
        form.on("submit(dosubmit)", function (obj) {
            //序列化表单数据
            var params = $("#dataform").serialize();
            $.post(url, params, function (data) {
                //刷新数据表格
                mytable.reload();
                //关闭弹出层
                layer.close(tanIndex);
            });

        })


        $("#deleteStuBtn").click(function () {
            var checkStatus = table.checkStatus('test'); //即为基础参数 id 对应的值
            console.log(checkStatus.data) //获取选中行的数据
            console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
            console.log(checkStatus.isAll) //表格是否全选
            var depId = ""; //用于拼接id
            if (checkStatus.data.length > 0) {
                for (var i = 0; i < checkStatus.data.length; i++) {
                    if (i == 0) {
                        depId = checkStatus.data[i].depId;
                    } else {
                        depId = checkStatus.data[i].depId + "," + depId;
                    }
                }
                $.ajax({
                    type: "get",
                    url: '${pageContext.request.contextPath}/deleteDepById',
                    data: '',
                    success: function (data) {
                        layer.msg("删除成功", {
                            icon: 6,
                            time: 1000
                        });
                    }
                })
            } else {
                layer.msg("没有选择数据", {
                    icon: 2,
                    time: 1000
                });
            }
            //刷新数据表格
            mytable.reload({
            })
            //关闭弹出层
            layer.close(tanIndex);
        });

        //每行按钮监听
        table.on('tool(test)', function (obj) {
            console.log(obj + "======")
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是  表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if (layEvent == 'edit') {
                //修改操作
                openUpdate(data);
            } else if (layEvent == 'del') {
                //删除操作
                layer.confirm('真的删除行?', function (index) {
                    $.get("deleteDepById", "depId=" + data.depId, function (back) {
                        //刷新数据表格
                        mytable.reload();
                    });
                    layer.close(index);
                });
            }
        });

        function openUpdate(row) {
            tanIndex = layer.open({
                type: 1,  //设置类型 默认为0 1 页面层 2 iframe层
                title: '修改部门信息',  //标题
                content: $("#mydiv"), //内容  type=0 的内容
                skin: 'layui-layer-molv',//skin - 样式类名
                area: ['400px'],  //area - 宽高
                offset: [50, 400],//offset - 坐标 默认：垂直水平居中
                btnAlign: 'c',//按钮排列
                closeBtn: 2,  //设置关闭按钮的样式 默认是1  0是没有 2
                anim: 4,//设置动画
                maxmin: true,//该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
                success: function (index) {
                    url = "updateDepByName";
                    //给表单赋值
                    form.val('dataform', row);
                }
            });
        }
    });

</script>
</html>
